<template>
  <div>
    <!-- 支付管理 -->

    <!-- 搜索框 -->

    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column fixed prop="id" label="Id" width="120">
      </el-table-column>
      <el-table-column prop="paymentName" label="支付方式名称" width="200">
      </el-table-column>
      <el-table-column prop="isActived" label="状态" width="200">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActived"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitchs(scope.$index, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="operation" label="操作" width="140">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 静态模态框，适用于增加和编辑 -->

    <el-dialog
      title="支付信息"
      :visible.sync="dialogFormVisible"
      style="overflow: hidden"
    >
      <el-form
        :model="formData"
        ref="elForm"
        :rules="rules"
        :label-position="labelPosition"
      >
        <el-form-item
          label="支付方式名称"
          prop="paymentName"
          :label-width="formLabelWidth"
        >
          <el-input clearable v-model="formData.paymentName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  delePayment,
  addPayment,
  getPayment,
  modPayment
} from '../../api/payment'
// import formatTime from '../../utils/formatTime'
import getColor from '../../utils/txorbg'
export default {
  data () {
    return {
      formLabelWidth: '120px',
      currentIndex: 0,
      dialogFormVisible: false,
      labelPosition: 'left',

      //   复选框  角色属性
      options: [],
      value: '',
      tableData: [],
      formData: {
        id: 0,
        paymentName: ''
      },
      rules: {
        paymentName: [
          {
            required: true,
            message: '支付名称不能为空',
            trigger: ['blur']
          }
        ]
      }
    }
  },
  mounted () {
    setTimeout(() => {
      console.log(this.tableData)
    }, 1500)
    this.fetchData(this)
  },

  methods: {
    // 模态框取消
    cancel () {
      this.dialogFormVisible = false
    },

    // 模态框确定(无论是添加还是修改后保存用户信息)
    handleSave () {
      this.$refs.elForm.validate((valid) => {
        if (!valid) return
        // TODO 提交表单

        console.log('没有错误', this.formData)
        // console.log(this.formData)
        // 如果表单中的id为0，则认为是添加用户，反之则为是修改用户
        if (this.formData.id === 0) {
          const us = this.formData
          us.txcolor = 'white'
          us.bgcolor = getColor()

          addPayment(us)
            .then((data) => {
              console.log(data)
              // 将新添加的数据Push到现有表数据的里面
              if (data.data.code === 200) {
                const paymentName = data.data.data
                this.tableData.push(paymentName)
                // this.fetchData(this)
                this.dialogFormVisible = false
                this.$message.success(data.data.msg)
              } else {
                this.dialogFormVisible = false
                this.$message.warning(data.data.msg)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
        }
      })
    },

    // 添加
    handleAdd () {
      this.dialogFormVisible = true
      this.formData.id = 0
      this.formData.paymentName = ''
    },
    // 删除用户
    async handleDelete (index, row) {
      // 删除时获得当前数组的下标
      this.currentIndex = index
      row.isDeleted = true

      const res = await delePayment(row.id, row)
      if (res.data.code === 200) {
        this.$message.success('删除成功')
        this.fetchData(this)
      } else {
        row.isDeleted = false
        this.$message.error('删除失败')
      }
    },
    // switch开关
    async changeSwitchs (index, row) {
      console.log(index, row)
      const res = await modPayment(row.id, { isActived: row.isActived })
      console.log(res)
      if (res.data.code === 200) {
        this.$message.success('修改成功！')
      } else {
        this.$message.error('修改失败！')
      }
    },

    // 拉取后台数据
    fetchData () {
      console.log()
      getPayment().then((data) => {
        console.log(data)
        this.tableData = data.data.data
      })
    }
  }
}
</script>

<style>
.block {
  text-align: center;
  /* display: flex; */
  margin-top: 15px;
}
</style>
